<!--
 * @FileDescription:轴选择器：对有所帮助的朋友点个关注再走呀！！！！
 * @Author: -----------
 * @LastEditors: ---------
-->
<template>
  <div style="margin-bottom: 2px;overflow: hidden">
    <div class="hours-container">
      <div v-for="(item, index) in hours" :key="index" class="hours-item">
        <div class="hours-item-value" style="border-right:1px solid #ccc; border-top:1px solid #ccc">
          <template v-for="(it,i) in 12">
            <el-tooltip :content="timeRangeIndexText(12 * item + i)" placement="top" v-if="timeRangeListIndex.indexOf(12 * item + i) > -1">
              <div :class="compClass(12 * item + i)" @click="handleClick(12 * item + i)" @mouseover="handleHover(12 * item + i)"></div>
            </el-tooltip>
            <div :class="compClass(12 * item + i)" @click="handleClick(12 * item + i)" @mouseover="handleHover(12 * item + i)" v-else></div>
          </template>
        </div>
        <div class="hours-item-header">
          <span v-if="false">{{ timeHours[index] }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    readonly: {
      type: Boolean,
      default: true
    },
    timeLineLists: {
      type: Array,
      default: []
    },
    textLineLists: {
      type: Array,
      default: []
    }
  },
  watch: {
    timeLineLists () {
      this.sendTimeList = this.timeLineLists
    },
    tips () {
      this.$emit('tipsList', this.tips)
    },
    timeRangeList: function (value) {
      this.$emit('change', value);
      this.$parent.$emit("el.form.change");// 触发父组件的校验规则
    },
    sendTimeList: {
      handler () {
        this.transformedIndex();
      },
      deep: true
    }
  },
  computed: {
  },
  data () {
    return {
      hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
      //timeHours: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],// 选项
      timeHours: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],// 选项
      selectStart: false,// 开始
      startIndex: '0',// 开始下标
      timeRangeList: [],// 选择的时间段
      timeRangeListIndex: [0],// 选中的下标
      timeRangeListIndexText: [],// 选中的下标文本
      tempRangeIndex: [],// 预选下标
      tips: '向右选中，向左取消选择',//提示操作
      endHour: '',//选择结束时间
      endMin: '',//选择结束分钟
      startHour: '',//开始时间
      startMin: '',//开始时间
      sendTimeList: [],
    }
  },
  mounted () {
    this.sendTimeList = this.timeLineLists;
    this.transformedIndex();
    this.transformedSection();
  },
  methods: {
    timeRangeIndexText(index){
      const i= this.timeRangeListIndexText.findIndex(opt=>opt.index === index)
      return i===-1 ? "" : this.timeRangeListIndexText[i].text
    },
    // 时间区间转换成下标区间
    transformedIndex () {
      this.timeRangeListIndex = [];
      this.timeRangeListIndexText = [];
      this.timeRangeList = this.sendTimeList;
      this.timeRangeList.forEach( (element,tIndex) => {
        const [startTime, endTime] = element.match(/\d+\:\d+/g);
        if (startTime && endTime) {
          let [startHour, startMin] = startTime.split(':');
          let [endHour, endMin] = endTime.split(':');
          if (startHour && startMin && endHour && endMin) {
            let startNum, endNum;
            if (startMin === '00') {
              startNum = 12 * parseInt(startHour);
            } else {
              startNum = 12 * parseInt(startHour) + Math.floor(startMin/5);
            }
            if (endMin === '00') {
              endNum = 12 * parseInt(endHour)-1;
            } else {
              endNum = 12 * parseInt(endHour)-1 + Math.ceil(endMin/5);
            }
            while (endNum >= startNum) {
              this.timeRangeListIndex.push(startNum);
              this.timeRangeListIndexText.push({
                index : startNum,
                text:this.textLineLists[tIndex]
              });
              startNum++;
            }
          } else {
            this.$message.error("时间段格式不正确");
          }
        } else {
          this.$message.error("没有拿到开始时间或结束时间或者时间段格式不对");
        }
      });
      this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '';
    },
    // 下标区间转换成时间区间
    transformedSection () {
      this.timeRangeList = [];
      // Array.from(new Set(this.timeRangeList))
      let startTime = '', endTime = '', len = this.hours.length;
      for (let index = this.hours[0] * 12; index < 12 * (len + 1); index++) {
        if (this.timeRangeListIndex.indexOf(index) > -1) {
          // 如果有开始时间，直接确定结束时间
          if (startTime) {
            // debugger
            this.endHour = Math.floor((index + 1) / 12);
            //判断是否重复选择选择下标开始结束时间
            if (this.endHour === this.startHour) {
              let endTimeAll = 5 * ((index) % 12) === 5 ? '05' : 5 * ((index) % 12)
              this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;
              endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
            } else {
              let endTimeAll = 5 * ((index + 1) % 12) === 5 ? '05' : 5 * ((index + 1) % 12)
              this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;
              endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
            }
          } else {
            // 没有开始时间，确定当前点为开始时间
            // debugger
            this.startHour = Math.floor(index / 12);
            let startTimeAll = 5 * (index % 12) === 5 ? '05' : 5 * ((index) % 12)
            this.startMin = index % 12 === 0 ? "00" : startTimeAll;
            startTime = `${this.startHour < 10 ? '0' + this.startHour : this.startHour}:${this.startMin}`;
          }
          // 如果是最后一格，直接结束
          if (index === 12 * this.hours.length + 1) {
            endTime = `${Math.floor((index + 1) / 12)}:00`;
            this.timeRangeList.push(`${startTime ? startTime : "23:30"}-${endTime}`);
            startTime = '';
            endTime = '';
          }
        } else {
          // 若这个点不在选择区间，确定一个时间段
          if (startTime && endTime) {
            this.timeRangeList.push(`${startTime}-${endTime}`);
            startTime = '';
            endTime = '';
          } else if (startTime && !endTime) {
            // 这里可能只选半个小时
            this.endHour = Math.floor(index / 12);
            //判断是否重复选择选择下标开始结束时间
            if (this.endHour === this.startHour) {
              let endTimeAll = 5 * ((index) % 12) === 5 ? '05' : 5 * ((index) % 12)
              this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;
              endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
              this.timeRangeList.push(`${startTime}-${endTime}`);
              startTime = '';
              endTime = '';
            } else {
              let endTimeAll = 5 * ((index + 1) % 12) === 5 ? '05' : 5 * ((index + 1) % 12)
              this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;
              endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
              this.timeRangeList.push(`${startTime}-${endTime}`);
              startTime = '';
              endTime = '';
            }
            // let endtimeAll = 15 * ((index + 1) % 4)
            // this.endMin = index % 4 === 0 ? "00" : endtimeAll;
            // endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
            // this.timeRangeList.push(`${startTime}-${endTime}`);
            // startTime = '';
            // endTime = '';
          }
        }
      }
      this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '';
    },
    // 点击事件
    handleClick (index) {
      if(this.readonly){

      }else{
        if (this.selectStart) {
          // 双击取反
          if (index === this.startIndex) {
            if (this.timeRangeListIndex.indexOf(index) > -1) {
              this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1);
            } else {
              this.timeRangeListIndex.push(this.startIndex);
            }
          } else if (index > this.startIndex) {
            // 选取数据--向右添加，向左取消
            while (index >= this.startIndex) {
              this.timeRangeListIndex.push(this.startIndex);
              this.startIndex++;
            }
            this.timeRangeListIndex = Array.from(new Set(this.timeRangeListIndex));
          } else {
            // 删除数据
            while (this.startIndex >= index) {
              if (this.timeRangeListIndex.indexOf(index) > -1) {
                this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1);
              }
              index++;
            }
          }
          this.startIndex = '';
          this.tempRangeIndex = [];
          this.transformedSection();
        } else {
          this.startIndex = index;
        }
        this.selectStart = !this.selectStart;
      }
    },
    // 预选区间
    handleHover (index) {
      if(this.readonly){
        return
      }
      if (this.selectStart) {
        this.tempRangeIndex = [];
        // 选取数据--向右添加，向左取消
        if (index > this.startIndex) {
          while (index >= this.startIndex) {
            this.tempRangeIndex.push(index);
            index--;
          }
        } else {
          // 删除数据
          while (this.startIndex >= index) {
            this.tempRangeIndex.push(index);
            index++;
          }
        }
      }
    },
    // 是否选中，计算className
    compClass (index) {
      if (index === this.startIndex) {
        return 'hours-item-left preSelected';
      }
      if (index >= this.startIndex) {
        if (this.tempRangeIndex.indexOf(index) > -1) {
          return 'hours-item-left preSelected';
        }
      } else {
        if (this.tempRangeIndex.indexOf(index) > -1) {
          return 'hours-item-left unSelected';
        }
      }
      return this.timeRangeListIndex.indexOf(index) > -1 ? 'hours-item-left selected' : 'hours-item-left';
    },
    compItem (item) {
      // 不足10前面补0
      return item < 10 ? `0${item}` : item;
    },
  },
}
</script>

<style lang="less" scoped>
.hours-container {
  margin-left: 2%;
  display: flex;
  cursor: pointer;
  margin-top: 5px;
  .hours-item {
    width: 4%;
    height: 30px;
    //border: 1px solid #c2d0f3;
    border-right: none;
    text-align: center;
    &:last-child {
      .hours-item-value {
        display: none;
      }
      .hours-item-header {
        border-top: none;
        //margin-top: 12px;
        margin-top: 25px;
        //margin-left: -20px;
        margin-left: -10px;
        font-size: 12px;
      }
    }

    .hours-item-header {
      text-align: left;
      position: relative;
      margin-left: -10%;
      width: 100%;
      height: 30px;
      line-height: 30px;
      border-top: 1px solid #ccc;
      font-size: 12px;
      &:last-child {
        width: 120%;
      }
    }
    .hours-item-value {
      width: 100%;
      height: 25px;
      box-sizing: border-box;
      display: flex;
      &:first-child {
        border-left: 1px solid #ccc;
      }
      &:last-child {
        border-right: 1px solid #ccc;
      }
      .hours-item-left,
      .hours-item-right {
        width: 50%;
        height: 25px;
        //margin-top: 1px;
        // border-right: 1px solid #ccc;

        box-sizing: border-box;
        &:last-child {
          border-right: none;
        }
      }
    }
    .selected {
      background-color: rgba(0, 87, 255, 0.4);
      border-bottom: 1px solid #ccc;
    }
    .preSelected {
      background-color: rgba(255, 148, 49, 0.4);
      border-bottom: 1px solid #ccc;
    }
    .unSelected {
      background-color: #ffffff;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
